/**
 * Created by 游永年 on 2019-01-23 15:42.
 * 预约第三步,课表详情
 */
'use strict'
import React, {Component} from 'react';
import {connect} from 'dva';
import {Button, List} from "antd-mobile";
import style from './MySteps.less';

const Item = List.Item;

class BookThree extends Component {
  render() {
    const {classes = []} = this.props;
    return (
      <div>
        {this.renderTitle()}
        <List>
          {classes.map(c => this.renderItem(c))}
        </List>
        <Button type={'primary'} onClick={this.submit}>提交</Button>
      </div>);
  }

  renderItem = c => {
    const {name = '', time = ''} = c || {};
    return <Item
      arrow="horizontal"
    >
      <div className={style.bookThreeItem}>
        <div className={style.bookThreeItemL}>{name}</div>
        <div className={style.bookThreeItemR}>{time}</div>
      </div>
    </Item>
  }

  renderTitle = _ => {
    return (
      <div className={style.btTopContainer}>
        <div className={style.text}>确认上课时间</div>
        <span className={style.btnContainer}>
          <Button className={style.btn} type={'ghost'} size={'small'} onClick={this.onClick}>重新选择</Button>
        </span>
      </div>);
  }


  onClick = _ => this.props.dispatch({type: 'product/step', payload: 1});
  submit = _ => this.props.dispatch({type: 'product/next', payload: 1});
};

BookThree.propTypes = {};

const opts = ({product}) => {
  const {classes = []} = product || {};
  return {classes};
}
export default connect(opts)(BookThree);
